import React, { useEffect, useState } from 'react';
import Header from '../../../../component/Serve/Header/Header'
import { useNavigate, useLocation } from 'react-router-dom'
import { Button, Form, Input, Col } from 'antd';
import { getOrganName, teamlist, findStatusName, optionlist, setServiceInfo, getPackName, getServerPro ,getDoctorList} from '../../../../api/Service'
import './serverDetail.scss'
import Select from 'rc-select';
interface Props {

}
function ServeRecordDetail(props: Props) {
    var navigate = useNavigate()
    var location = useLocation()
    var [data, setData] = useState([]);//表格数据
    const [form] = Form.useForm()
    //下拉框数据
    var [organName, setOrganName] = useState([])
    var [packName, setPackName] = useState([])
    var [statusName, setStatusName] = useState([])
    var [dteamName, setDteamName] = useState([])
    var [project, setProject] = useState([])
    //医生列表
    var [doctor, setDoctor] = useState([])

    //挂载期获取回显数据
    useEffect(() => {
        getInfo()
        getName()
        form.setFieldsValue(location.state)
    }, [])
    //合并数据函数
    var setList = (arr: any) => {
        var newarr = arr.map((item: any) => { return { ...item[0], ...item[1] } })
        return newarr
    }
    //获取用户详情信息
    var getInfo = async () => {
        var res = await setServiceInfo({ serviceId: location.state.serviceId })
        var newarr = Object.assign({}, ...res.data.data[0])
        setData(newarr)
    }
    //获取下拉框数据
    var getName = async () => {
        var res = await optionlist()//机构
        if (res.data.code == 200) {
            setOrganName(res.data.data.map((item: any) => { return { value: item.mechanismId, label: item.mechanismName } }))
        }
        var res1 = await teamlist()//医生团队  
        if (res1.data.code == 200) {
            setDteamName(res1.data.data.map((item: any) => { return { value: item.teamId, label: item.teamName } }))
        }
        var res2 = await getPackName()//服务包
        setPackName(res2.data)
        var res3 = await findStatusName()//状态
        if (res3.data.code == 200) {
            var res4 = res3.data.data.map((item: any) => { return { value: item.ssId, label: item.ssName } })
            setStatusName(res4)
        }
        var res5 = await getServerPro()//服务项目
        var res6 = setList(res5.data.data)
        if (res.data.code == 200) {
            setProject(res6.map((item: any) => { return { value: item.projectId, label: item.projectName } }))
        }
        var res7 = await getDoctorList()//医生列表
        var res8 = res7.data.data.map((item: any) => { return { value: item.doctorId, label: item.doctorName } })
        setDoctor(res8)
    }
    return (
        <div className='servedetail'>
            <div className="main">
                <Header txt='服务详情'></Header>
                <div className="resident">
                    <h4>居民信息</h4>
                    <div className="inputbox">
                        <Form
                            name="basic"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                            form={form}
                        >

                            <Col span={8}>
                                <Form.Item
                                    label="姓名"
                                    name="residentName"

                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} style={{ color: "#2984f8" }} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="身份证号"
                                    name="residentNumber"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>


                            <Col span={8}>
                                <Form.Item
                                    label="性别"
                                    name="residentGender"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="出生年月"
                                    name="residentBirth"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="联系电话"
                                    name="residentPhone"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="现居地"
                                    name="residentNowAddress"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="居民标签"
                                    name="rtId"
                                >
                                    <span >{location.state.rtId}</span>
                                </Form.Item>
                            </Col>

                            <Col span={16}></Col>


                            <Col span={24}><h4>服务信息</h4></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务编号"
                                    name="residentId"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务状态"
                                    name="serviceStatus"
                                >
                                    <Select options={statusName} disabled style={{ color: "#3DD4A7" }} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务机构"
                                    name="mechanismId"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={organName} disabled />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务团队"
                                    name="teamId"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={dteamName} disabled />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务医生"
                                    name="doctorId"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={doctor} disabled />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务包"
                                    name="packageId"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={packName} disabled></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务项目"
                                    name="projectName"
                                >
                                    <Select options={project} disabled></Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务来源"
                                    name="serviceSource"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务地点"
                                    name="servicePlace"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="预约时间"
                                    name="serviceAppointment"
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="提交时间"
                                    name="serviceSubmit"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="审核时间"
                                    name="serviceExamine"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="审核人"
                                    name="serviceExaminePeople"
                                    rules={[{ required: true }]}
                                >
                                    <Input bordered={false} />
                                </Form.Item>
                            </Col>
                            {
                                location.state.serviceStatus === 5 ?
                                    <>
                                        <Col span={8}>
                                            <Form.Item
                                                label="取消时间"
                                                name="serviceCancel"
                                            >
                                                <Input bordered={false} />
                                            </Form.Item>
                                        </Col>

                                        <Col span={8}>
                                            <Form.Item
                                                label="取消原因"
                                                name="serviceCancelReason"
                                            >
                                                <Input bordered={false} />
                                            </Form.Item>
                                        </Col>
                                    </> :
                                    <Col span={8}>
                                        <Form.Item
                                            label="完成时间"
                                            name="serviceFinish"
                                        >
                                            <Input bordered={false} />
                                        </Form.Item>
                                    </Col>
                            }

                            <Col span={24}></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务备注"
                                    name="serviceDesc"
                                >
                                    <span>{location.state.comment == "" ? "无" : location.state.comment}</span>
                                </Form.Item>
                            </Col>

                            <Col span={24}>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    <Button onClick={() => { navigate(-1) }}>返回</Button>
                                </Form.Item>
                            </Col>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ServeRecordDetail;